<!DOCTYPE html>
{% load staticfiles %}
<html lang="en">
<head>
    <script src="{% static 'jquery-3.1.1.min.js' %}" type="text/javascript"></script>
	<meta charset="UTF-8">
	<title>跑流量</title>
    <style>
        table {
            margin: auto;
        }
        body {
            overflow: auto;
        }
        ul li{
            list-style-type:none;
        }
        .pageturn {
    clear: both;
    height: 30px;
    margin: 50px auto;
    display: table;
    text-align: center;
        }

        .pageturn .pagelist {
            display: table-cell;
            vertical-align: middle;
            overflow: hidden;
        }

        .pageturn li {
            width: 30px;
            height: 30px;
            line-height: 30px;
            margin-left: 10px;
            float: left;
            text-align: center;
        }

        .pageturn li:first-child {
            margin-left: 0;
        }

        .pageturn li:hover a, .pageturn .active a {
            background: #717171;
            color: #fff;
            border-color: #eaeaea;
        }

        .pageturn a {
            border: 1px solid #eaeaea;
            display: block;
            height: 28px;
            color: #6c6c6c;
        }

        .pageturn .long {
            width: 100px;
        }

        .pageturn .none a {
            border: 0;
        }
    </style>
	<script>
        var url = window.location.pathname;
        {#alert(url);#}

        function run(){
    　　　  alert("点击了");
            diaojiekou();
            timename = setInterval(
                "shuaxin()"
                ,1000
            );
        }


        function shuaxin(){
            $.ajax({
				type:'get',
				url:url,
				success:function(data){
				    console.log(data);

				}
			})
        }

        function diaojiekou(){
            $.ajax({
				method: 'POST',
				url:'/paopao/',
                data:{file_name:url},
				success:function(data){
				    alert(data);
				}
			})
        }





	</script>

</head>
<body>
	<div id="container">
		<table width="1200px" cellpadding="10" cellspacing="0" border="1" >
			<tr>
				<td colspan="5" >
                    <button id="btn" onclick="run()">开始跑流量</button>
{#					<input type="button" value="开始跑流量" id="startpaopao">#}
{#					<input type="button" value="发送验证码" id="deleteBtn" disabled>#}
				</td>
			</tr>
			<tr>
				<td width="100px">IMEI</td>
				<td width="100px">状态</td>
				<td width="100px">完成时间</td>
				<td width="100px">文件名</td>
			</tr>
            {% for user in all_imei.object_list %}
            <tr>
				<td>{{ user.imei }}</td>
				<td>{{ user.state }}</td>
				<td>{{ user.oktime }}</td>
				<td>{{ user.filename }}</td>
			</tr>
            {% endfor %}
        </table>
	</div>
    <div class="pageturn">
        <ul class="pagelist">
            {% if all_imei.has_previous %}
                <li class="long"><a href="?{{ all_imei.previous_page_number.querystring }}">上一页</a></li>
            {% endif %}

            {% for page in all_imei.pages %}
                {% if page %}
                    {% ifequal page all_imei.number %}
                        <li class="active"><a href="?{{ page.querystring }}">{{ page }}</a></li>
                    {% else %}
                        <li><a href="?{{ page.querystring }}" class="page">{{ page }}</a></li>
                    {% endifequal %}
                {% else %}
                    <li class="none"><a href="">...</a></li>
                {% endif %}
            {% endfor %}
            {% if all_imei.has_next %}
                <li class="long"><a href="?{{ all_imei.next_page_number.querystring }}">下一页</a></li>
            {% endif %}

        </ul>
    </div>

</body>
</html>